<!DOCTYPE html>
<html>

<head>
    <title>用车申请记录·车队管理系统</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- import CSS -->
    <link rel="stylesheet" href="/static/css/vant.css">
    <link rel="stylesheet" href="/static/css/StartAdmin.css">
    <style>
        #fail-row {
            background: #ffe6e6;
        }

        #pass-row {
            background: #dbffe2;
        }

        #ing-row {
            background: #ffffff;
        }
        #head{
            padding: 10px 1px
        }
    </style>
</head>

<body>
<div id="app">
    <van-row>
        <van-nav-bar title="用车申请记录">
            <template #right>
                <van-icon name="plus" size="18" onclick="location.href='addapplication';"/>
            </template>
        </van-nav-bar>
    </van-row>
    <br>
    <van-cell id="head" >
        <van-col span="3" offset="1">编号</van-col>
        <van-col span="4" >开始日期</van-col>
        <van-col span="4" offset="2">结束日期</van-col>
        <van-col span="4" offset="1">车辆编号</van-col>
        <van-col span="2" offset="1">状态</van-col>
    </van-cell>

    <van-list>
        <van-cell v-for="item in application" v-bind:id="tableRowClassName(item)">
            <van-col span="3">{{item.applyid}}</van-col>
            <van-col span="7">{{item.start_date}}</van-col>
            <van-col span="7">{{item.end_date}}</van-col>
            <van-col span="3">{{item.carid}}</van-col>
            <van-col span="4">{{item.status}}</van-col>
        </van-cell>
    </van-list>
    {include file="common/footer"/}
    <script>

        new Vue({
            el: '#app',
            data() {
                return {
                    active:"apply",
                    user:"",
                    update_time:"",
                    application:[

                    ],
                }
            },
            mounted () {

                this.abc();
            },
            methods: {

                abc(){
                    var that = this;
                    axios.post('worker/getmyapplication')
                        .then(function (response)
                        {
                            that.application = response.data.data;
                        })
                },
                tableRowClassName(item) {
                    if (item.status === 'fail') {
                        return 'fail-row';
                    }
                    else if(item.status === 'pass'){
                        return 'pass-row'
                    }
                    return 'ing-row';
                }
            }
        })


    </script>

</html>